<template>
  <section style="margin: 0 auto">
    <template>
      <el-form :inline="true" label-width="80px" style="width: 840px;margin-bottom: 10px">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table border :data="users" style="width: 951px">
      <el-table-column type="index" label="序列" width="100">
      </el-table-column>
      <el-table-column prop="receiveTime" label="奖励时间" width="170" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="receiveReason" label="奖励类型" width="170">
      </el-table-column>
      <el-table-column prop="reward" label="奖励数量" width="170">
      </el-table-column>
      <el-table-column prop="status" label="是否领取" width="170" :formatter="formStatus">
      </el-table-column>
      <el-table-column prop="rewardCount" label="领取时间" width="170">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="count" >
      </el-pagination>
    </div>
  </section>
</template>
<script>
  import axios from 'axios'
  import moment from 'moment'
  export default {
    data() {
      return {
        users: [],
        count: 0,
        uid: this.$route.query.uid,
        page: 0,
        dateRange: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    methods: {
      dateFormat: function(row, column) {
        var date = row[column.property];
        if(date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      query(){
        this.getChannel();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getChannel(val);
      },
      formStatus: function(row, column) {
        return row.status == 1 ? '已领取' : row.status == 0 ? '未领取' :  row.status == -1 ? '已过期':'待审核';
      },
      getChannel: function (index,datetime) {
        var _this = this;
        // var datetime =  moment(this.date).format("YYYY-MM-DD HH:mm:ss");
        axios.get(
          '/api/userParticulars', {
            method: 'GET',
            params: {
             uid : this.uid,
              page: index,
              startDate: this.dateRange ? this.dateRange[0] : '',
              endDate: this.dateRange ? this.dateRange[1] : ''
            }
          })
          .then(res => res.data)
          .then(({rows, count}) => {
            this.users = rows;
            this.count = count
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      compile:function (index,row) {
        alert(row.userId)
      },
    },
    mounted(){
      this.getChannel()
    }
  }
</script>
<style>
  p{
    text-align: left;
  }
  section{
    padding-left:100px;
  }
  .el-form--inline .el-form-item__label{
    margin-top: -16px;
  }
</style>
